<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>生命体征检测云平台</title>
		<link rel="shortcut icon" href="static/logo.ico" />
		<link rel="stylesheet" href="static/css/index.css" />
		<link rel="stylesheet" href="static/layui/css/layui.css" />
		<script type="text/javascript" src="static/js/jquery.min.js"></script>
		<script type="text/javascript" src="static/layui/layui.js"></script>
		<script type="text/javascript" src="static/js/vue.js"></script>
		<script type="text/javascript" src="static/js/axios.min.js"></script>
		<style>
			html,
			body,
			#container {
				height: 100%;
				width: 100%;
				margin: 0;
			}

			.collision-btn.disable {
				background-image: none;
				color: lightgrey;
				border-color: lightgrey;
				cursor: not-allowed;
			}

			.collision-btn.disable:hover {
				background-color: #fff;
				border-color: lightgrey;
			}

			.input-card .btn {
				margin-right: .8rem;
			}

			.amap-marker {
				opacity: 0.01;
			}

			.amap-container img {
				width: 83px;
				height: 45px;
			}

			.amap-info {
				z-index: 99999 !important;
			}
		</style>
		<script>
			$(function() {
				$('.userinfo').hover(function() {

				});
			});
		</script>
	</head>
	<body>
		<div id="container"></div>
		<div id="app">
			<div class="info">
				<div class="nav-left">
					<a class="login"></a>
					<a class="hometext" href="index.html">首页</a>
				</div>
				<div class="nav-right">
					<ul>
						<li><a href="monitoring.html">监测</a></li>
						<li><a href="historical_data.html">历史数据</a></li>
						<li><a href="call_p.html">离床报警</a></li>
						<li><a href="#">康养中心</a></li>
						<li><a href="#">中医问诊</a></li>
					</ul>
				</div>
				<div class="userinfo" id="userinfo">
					<img src="static/image/user.png" />
					<!-- <div class="red-dot"></div> -->
					<ul class="user_dropdown">
						<li class="dropdown_item user_ctrl">
							<div class="nickname">小店区（管理员）</div>
							<div class="sign_out">退出</div>
						</li>
						<li class="dropdown_item msg_item">
							<a href="user.html" target="_blank">
								<span>个人中心</span>
							</a>
						</li>
						<li class="dropdown_item msg_item">
							<a href="my_message.html" target="_blank">
								<span>我的消息</span>
								<span class="msg_unread unread_count show">5</span>
							</a>
						</li>
						<li class="dropdown_item">
							<a href="equipment.html">
								<span>设备</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="input-card">
				<label class="layui-form-label" style="color:grey;text-align: left;padding:0 !important">省市区：</label>
				<div class="input-item">
					<input name="provcode" id="provcode" type="hidden" />
					<select name="quiz1" id="prov-number" onchange="showCity(this)">
						<option value="">=请选择省份=</option>
					</select>
				</div>
				<div class="input-item">
					<input name="citycode" id="citycode" type="hidden" />
					<!--  <select name="quiz2">
                    <option value="">请选择市</option>
                    <option value="太原市" selected="">太原市</option>
                  </select> -->
					<select name="quiz2" id="city-number" onchange="showCountry(this)">
						<option value="">=请选择城市=</option>
					</select>
				</div>
				<div class="input-item">
					<input name="countrycode" id="countrycode" type="hidden" />
					<select name="quiz3" id="country-number" onchange="selecCountry(this)">
						<option value="">=请选择县、区=</option>
					</select>
				</div>
				<label style="color:grey">社区选择：</label>
				<div class="input-item">
					<select name="city" lay-verify="required" id="shequ">
						<option value="">全部</option>
					</select>
				</div>
				<div class="input-item">
					<button class="btnss met04" onClick="showAddr()">搜索</button>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=a5a3157f5790c2f59a2feca2920ffc8b">
		</script>
		<script>
			$(function() {
				$(".sign_out").click(function() {
					localStorage.clear();
					window.location = 'login.html'
				});
				var logintypes = localStorage.logintypes;
				if (logintypes == 1) {
					window.location = 'home.html'
				}
			});

			layui.use('layer', function() {
				var layer = layui.layer;
			 //示范一个公告层
				layer.open({
					type: 1,
					title: false //不显示标题栏
						,
					closeBtn: false,
					area: '300px;',
					shade: 0.8,
					id: 'LAY_layuipro' //设定一个id，防止重复弹出
						,
					resize: false,
					btn: ['知道了'],
					btnAlign: 'c',
					moveType: 1 //拖拽模式，0或者1
						,
					content: '<div style="padding: 50px; line-height: 22px; background-color: #063683; color: #fff; font-weight: 300;">尊敬的xxx用户:您好!云平台将于2022年11月30日(周三)晚20:00进行系统维护,届时云平台4G模式将无法监测。期间给您带来的不便请您谅解,非常感谢您的支持和配合!</div>',
					success: function(layero) {
						var btn = layero.find('.layui-layer-btn');
						// btn.find('.layui-layer-btn0').attr({
						//   href: 'http://'
						//   ,target: '_blank'
						// });
					}
			 });

			});
			// 设置一个图标对象
			var icon = {
				// 图标类型，现阶段只支持 image 类型
				type: 'image',
				// 图片 url
				image: 'static/image/express2.png',
				// 图片尺寸
				size: [64, 30],
				// 图片相对 position 的锚点，默认为 bottom-center
				anchor: 'center',
			};
			var textStyle = {
				fontSize: 12,
				fontWeight: 'normal',
				fillColor: '#22886f',
				strokeColor: '#fff',
				strokeWidth: 2,
				fold: true,
				padding: '2, 5',
			};
			var LabelsData = [{
					name: '上工智能1',
					position: [112.562958, 37.820866],
					zooms: [10, 20],
					opacity: 1,
					zIndex: 10,
					fold: true,
					icon,
					text: {
						// 要展示的文字内容
						content: '奥林花园',
						// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
						direction: 'right',
						// 在 direction 基础上的偏移量
						offset: [-20, -5],
						// 文字样式
						style: {
							// 字体大小
							fontSize: 12,
							// 字体颜色
							fillColor: '#22886f',
							//
							strokeColor: '#fff',
							strokeWidth: 2,
							fold: true,
							padding: '2, 5',
						}
					}
				},
				{
					name: '上工智能2',
					position: [112.573487, 37.825032],
					zooms: [10, 20],
					opacity: 1,
					zIndex: 16,
					icon,
					text: {
						content: '佳地花园',
						direction: 'right',
						offset: [-20, -5],
						style: textStyle
					}
				},
				{
					name: '上工智能3',
					position: [112.551205, 37.813186],
					zooms: [10, 20],
					opacity: 1,
					zIndex: 8,
					icon,
					text: {
						content: '景帝华府',
						direction: 'right',
						offset: [-20, -5],
						style: textStyle
					}
				},
				{
					name: '上工智能5',
					position: [112.576423, 37.778257],
					zooms: [10, 20],
					opacity: 1,
					zIndex: 6,
					icon,
					text: {
						content: '御龙庭',
						direction: 'right',
						offset: [-20, -5],
						style: textStyle
					}
				},
				{
					name: '上工智能6',
					position: [112.572818, 37.74942],
					zooms: [10, 20],
					opacity: 1,
					zIndex: 5,
					icon,
					text: {
						content: '恒大绿洲',
						direction: 'right',
						offset: [-20, -5],
						style: textStyle
					}
				},
				{
					name: '上工智能7',
					position: [112.550717, 37.82095],
					zooms: [10, 20],
					opacity: 1,
					zIndex: 4,
					icon,
					text: {
						content: '恒实平阳景苑',
						direction: 'right',
						offset: [-20, -5],
						style: textStyle
					}
				},
				{
					name: '上工智能8',
					position: [112.566209, 37.816746],
					zooms: [10, 20],
					opacity: 1,
					zIndex: 3,
					icon,
					text: {
						content: '长风画卷',
						direction: 'right',
						offset: [-20, -5],
						style: textStyle
					}
				},
				{
					name: '上工智能9',
					position: [112.544451, 37.799528],
					zooms: [10, 20],
					zIndex: 2,
					opacity: 1,
					icon,
					text: {
						content: '银海水韵',
						direction: 'right',
						offset: [-20, -5],
						style: textStyle
					}
				}
			];
		</script>
		<script type="text/javascript">
			var map = new AMap.Map('container', {
				zoom: 20,
				center: [112.549656, 37.870451],
				showIndoorMap: false,
			});

			var markers = [];
			var allowCollision = false;
			var layer = new AMap.LabelsLayer({
				zooms: [3, 20],
				zIndex: 1000,
				// collision: false,
				// 设置 allowCollision：true，可以让标注避让用户的标注
				allowCollision,
			});
			layer.add(markers);
			// 图层添加到地图
			map.add(layer);
			var infoWindow = new AMap.InfoWindow({
				offset: new AMap.Pixel(-10, -10)
			});
			// 初始化 labelMarker
			for (var i = 0; i < LabelsData.length; i++) {
				var curData = LabelsData[i];
				curData.extData = {
					index: i
				};
				var marker = new AMap.Marker({
					position: LabelsData[i]['position'],
					map: map
				});
				var title = LabelsData[i]['text'].content,
					content = [];
				content.push("社区名称：" + title);
				content.push("社区人数：9999人");
				// content.push("设备名称：" + LabelsData[i]['name']);
				// content.push("设备状态：开启");
				// content.push("温湿度数据：20度");
				// content.push("海拔：1000M");
				// content.push("定位：山西省太原市XXXXXXXXXXXXXXXXXXXXXXXXXX");
				// content.push(
				// 	"<a href='monitoring_data.html' style='width: 100%;color: #063683;font-weight: bold;'>设备详情</a>");
				marker.title = title;
				marker.content = content.join("<br/>");
				// marker.content = createInfoWindow(title, content.join("<br/>"));
				marker.on('click', markerClick);
				marker.emit('click', {
					target: marker
				});
				//实例化信息窗体


				var labelMarker = new AMap.LabelMarker(curData);

				markers.push(labelMarker);

			}

			// 将 marker 添加到图层
			layer.add(markers);
			//构建自定义信息窗体
			function createInfoWindow(title, content) {
				var info = document.createElement("div");
				info.className = "custom-info input-card content-window-card";

				//可以通过下面的方式修改自定义窗体的宽高
				//info.style.width = "400px";
				// 定义顶部标题
				var top = document.createElement("div");
				var titleD = document.createElement("div");
				var closeX = document.createElement("img");
				top.className = "info-top";
				titleD.innerHTML = title;
				closeX.src = "https://webapi.amap.com/images/close2.gif";
				closeX.onclick = closeInfoWindow;
				top.appendChild(titleD);
				top.appendChild(closeX);
				info.appendChild(top);
				// 定义中部内容
				var middle = document.createElement("div");
				middle.className = "info-middle";
				middle.style.backgroundColor = 'white';
				middle.innerHTML = content;
				info.appendChild(middle);
				// 定义底部内容
				var bottom = document.createElement("div");
				bottom.className = "info-bottom";
				bottom.style.position = 'relative';
				bottom.style.top = '0px';
				bottom.style.margin = '0 auto';
				var sharp = document.createElement("img");
				sharp.src = "https://webapi.amap.com/images/sharp.png";
				bottom.appendChild(sharp);
				info.appendChild(bottom);
				return info;
			}

			function markerClick(e) {
				infoWindow.setContent(e.target.content);
				infoWindow.open(map, e.target.getPosition());
			}
			//关闭信息窗体
			function closeInfoWindow() {
				map.clearInfoWindow();
			}
			map.setFitView(null, false, [100, 150, 10, 10]);
		</script>
		<script type="text/javascript" src="static/js/config.js"></script>
		<script>
			var vm = new Vue({
				el: '#app', //设置当前vue对象可以操作数据的范围,注意不要把vue对象绑定到body中，因为这样，vue需要控制整个页面的内容，效率太低了
				data: {},
				methods: {
					showProv: function() {
						btn_number.disabled = true;
						for (let key in cityList) {
							let provOpt = document.createElement('option');
							provOpt.innerText = provOpt.value = key;
							prov_number.appendChild(provOpt);
						}
					},
				}
			})
		</script>
		<script src="static/js/citycodedata.js"></script>
		<script src="static/js/methodcode.js"></script>
	</body>
</html>
